<template>
  <view class="container">
    <!-- 状态栏高度 -->
    <view class="status-bar"></view>

    <!-- 头部信息 -->
    <view class="header">
      <view class="img"><image src="/src/static/default.png" /></view>
      <view class="info">
        <view class="hello">{{ time }}好，张爷爷</view>
        <view class="desc">
          <view class="date">10月25日</view>
          <view class="day">星期三</view>
          <view class="weather">晴</view>
          <view class="temp">30°C</view>
        </view>
      </view>
    </view>

    <!-- 健康检测  -->
    <view class="health-check" @tap="goToHealthDetail">
      <view class="title">健康检测</view>
      <view class="desc">
        <view
          class="item"
          v-for="(healthItem, index) in healthData"
          :key="index"
          :class="{ active: healthItem.active }"
          @tap.stop="toggleHealthItem(index)"
        >
          <image :src="healthItem.icon" />
          <text class="text">{{ healthItem.text }}</text>
          <view class="value" :class="{ active: healthItem.active }">
            <text class="word">{{ healthItem.value }}</text> {{ healthItem.unit }}
          </view>
        </view>
      </view>
      <view class="more" @tap.stop="goToHealthDetail">
        查看详情 <uni-icons type="right" color="#1296db" size="18" />
      </view>
    </view>

    <!-- 紧急求助 -->
    <view class="emergency">
      <view
        class="btn"
        @tap="handleEmergency"
        @touchstart="emergencyBtnScale = 0.95"
        @touchend="emergencyBtnScale = 1"
        @touchcancel="emergencyBtnScale = 1"
        :style="{ transform: `scale(${emergencyBtnScale})` }"
      >
        <uni-icons type="phone" color="#fff" size="36" />
      </view>
      <text class="word">紧急求助</text>
    </view>

    <!-- 今日用药提醒 -->
    <view class="reminder">
      <view class="title">
        <view class="left">今日用药提醒</view>
        <view class="right" @tap="voiceReminder">
          <uni-icons type="mic-filled" color="#60A9D6" size="24" />
        </view>
      </view>
      <view class="list">
        <view
          class="item"
          v-for="item in reminderList"
          :key="item.id"
          @tap="toggleReminder(item)"
          :class="{ finished: item.finished }"
        >
          <view class="left">
            <text class="name">{{ item.name }}</text>
            <text class="advice">{{ item.advice }}</text>
          </view>
          <view class="right">
            <uni-icons v-if="item.finished" type="checkbox" color="#60A9D6" size="24" />
            <uni-icons v-else type="checkbox-filled" color="#60A9D6" size="24" />
          </view>
        </view>
      </view>
    </view>

    <!-- 更多 -->
    <view class="more-section">
      <view
        class="chat common"
        @tap="goToChat"
        @touchstart="setHover('chat', true)"
        @touchend="setHover('chat', false)"
        @touchcancel="setHover('chat', false)"
        :class="{ hover: hoverStates.chat }"
      >
        <view class="icon"><uni-icons color="#6DA3C5" size="40" type="chat"></uni-icons> </view>
        <view class="text">和小智聊天</view>
      </view>
      <view
        class="common"
        @tap="goToRecommend"
        @touchstart="setHover('recommend', true)"
        @touchend="setHover('recommend', false)"
        @touchcancel="setHover('recommend', false)"
        :class="{ hover: hoverStates.recommend }"
      >
        <view class="icon"><uni-icons color="#6DA3C5" size="40" type="map"></uni-icons> </view>
        <view class="text">推荐内容</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 判断是上午还是下午还是晚上还是凌晨
const time = computed(() => {
  const hour = new Date().getHours();
  if (hour < 6) {
    return '凌晨';
  } else if (hour < 9) {
    return '早上';
  } else if (hour < 12) {
    return '上午';
  } else if (hour < 14) {
    return '中午';
  } else if (hour < 18) {
    return '下午';
  } else {
    return '晚上';
  }
});

// 健康数据
const healthData = ref([
  {
    icon: '/src/static/heart-rate.png',
    text: '心率',
    value: '75',
    unit: '次/分',
    active: false,
  },
  {
    icon: '/src/static/heart-pressure.png',
    text: '血压',
    value: '135/85',
    unit: '',
    active: true,
  },
  {
    icon: '/src/static/sleep.png',
    text: '睡眠',
    value: '7.5',
    unit: '小时',
    active: false,
  },
]);

const reminderList = ref([
  {
    id: '1',
    name: '降压药（阿司匹林）',
    advice: '早餐后 8:30',
    finished: false,
  },
  {
    id: '2',
    name: '降糖药（雀巢）',
    advice: '晚餐前 12:00',
    finished: true,
  },
]);

// 交互状态
const emergencyBtnScale = ref(1);
const hoverStates = ref({
  chat: false,
  recommend: false,
});

// 处理紧急求助逻辑
const handleEmergency = () => {
  console.log('handleEmergency');
  uni.showModal({
    title: '紧急求助',
    content: '是否立即拨打紧急联系人电话？',
    confirmColor: '#FF4757',
    success: (res) => {
      if (res.confirm) {
        // 实际项目中这里会调用电话功能
        uni.makePhoneCall({
          phoneNumber: '120',
        });
      }
    },
  });
};

// 切换用药提醒状态
const toggleReminder = (item) => {
  item.finished = !item.finished;
  // 添加点击反馈
  uni.vibrateShort();
};

// 切换健康数据项状态
const toggleHealthItem = (index) => {
  healthData.value.forEach((item, i) => {
    item.active = i === index;
  });
};

// 跳转健康详情
const goToHealthDetail = () => {
  console.log('跳转健康详情');
  uni.navigateTo({
    url: '/pages/health/detail',
  });
};

// 语音提醒
const voiceReminder = () => {
  console.log('语音提醒');
  uni.vibrateShort();
};

// 跳转聊天
const goToChat = () => {
  console.log('跳转聊天');
};

// 跳转推荐
const goToRecommend = () => {
  console.log('跳转推荐');
};

// 设置悬停状态
const setHover = (type, state) => {
  hoverStates.value[type] = state;
};

// 页面加载动画
onMounted(() => {
  // 可以在这里添加页面进入动画
});
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  animation: fadeIn 0.6s ease-out;

  .reminder,
  .health-check {
    padding: 20rpx;
    margin: 18rpx auto;
    width: 90vw;
    border-radius: 14rpx;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    }
  }

  .more-section {
    display: flex;
    gap: 10rpx;
    justify-content: space-around;
    margin-top: 40rpx;

    .common {
      width: 40vw;
      height: 200rpx;
      background-color: #f3f7fe;
      border-radius: 10rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

      &.hover,
      &:active {
        transform: translateY(-4rpx);
        box-shadow: 0 8rpx 24rpx rgba(108, 163, 197, 0.2);
        background-color: #e8f1f8;
      }

      .icon {
        transition: transform 0.3s ease;
      }

      &.hover .icon,
      &:active .icon {
        transform: scale(1.1);
      }
    }
  }

  .reminder {
    height: auto;
    background-color: #fff9e9;
    border-left: 6rpx solid #ffd166;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        font-weight: bold;
        font-size: 36rpx;
      }

      .right {
        padding: 10rpx;
        border-radius: 50%;
        transition: all 0.3s ease;

        &:active {
          background-color: rgba(96, 169, 214, 0.1);
          transform: scale(0.95);
        }
      }
    }

    .list {
      margin-top: 15rpx;

      .item {
        height: 100rpx;
        margin-top: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-radius: 10rpx;
        transition: all 0.3s ease;
        background-color: rgba(255, 255, 255, 0.5);

        &:active {
          background-color: rgba(255, 255, 255, 0.8);
          transform: scale(0.98);
        }

        &.finished {
          opacity: 0.6;

          .name,
          .advice {
            text-decoration: line-through;
          }
        }

        .left {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .name {
            font-weight: 500;
            font-size: 30rpx;
            transition: color 0.3s ease;
          }

          .advice {
            font-size: 22rpx;
            font-weight: 500;
            color: #aaa;
          }
        }

        .right {
          transition: transform 0.3s ease;
        }

        &:active .right {
          transform: scale(1.2);
        }
      }
    }
  }

  .emergency {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 5rpx;
    margin: 30rpx 0;

    .btn {
      border-radius: 50%;
      width: 120rpx;
      height: 120rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);
      transition: all 0.2s ease;
      box-shadow: 0 6rpx 20rpx rgba(255, 71, 87, 0.4);
      animation: pulse 2s infinite;

      &:active {
        animation: none;
        box-shadow: 0 3rpx 10rpx rgba(255, 71, 87, 0.6);
      }
    }

    .word {
      font-size: 28rpx;
      font-weight: bold;
      color: rgb(247, 70, 70);
      margin-top: 10rpx;
    }
  }

  .health-check {
    border: 1rpx solid #1296db;
    height: auto;
    background: linear-gradient(135deg, #f1f9fc 0%, #e8f4f8 100%);
    position: relative;
    overflow: hidden;
    width: 88vw;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4rpx;
      background: linear-gradient(90deg, #1296db, #34e89e);
    }

    .title {
      font-weight: bold;
      color: #1296db;
      font-size: 36rpx;
    }

    .desc {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 20rpx;

      .item {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 8rpx;
        padding: 20rpx;
        border-radius: 12rpx;
        transition: all 0.3s ease;
        min-width: 180rpx;

        &.active,
        &:active {
          background-color: rgba(18, 150, 219, 0.1);
          transform: translateY(-2rpx);
          box-shadow: 0 4rpx 12rpx rgba(18, 150, 219, 0.2);
        }

        .text {
          font-size: 24rpx;
          font-weight: 500;
          color: #666;
        }

        .value {
          font-weight: bold;
          font-size: 30rpx;
          color: #333;
          transition: color 0.3s ease;

          &.active {
            color: rgb(228, 14, 14);
          }

          .word {
            font-size: 40rpx;
          }
        }

        image {
          width: 85rpx;
          height: 85rpx;
          transition: transform 0.3s ease;
        }

        &:active image {
          transform: scale(1.1);
        }
      }
    }

    .more {
      margin-top: 24rpx;
      gap: 8rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #1296db;
      padding: 10rpx;
      transition: all 0.3s ease;

      &:active {
        color: #0d7bbf;
        transform: translateX(4rpx);
      }
    }
  }

  .status-bar {
    height: 64rpx;
  }

  .header {
    display: flex;
    align-items: center;
    gap: 18rpx;
    padding: 36rpx;
    animation: slideDown 0.6s ease-out;

    .img {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 85rpx;
      height: 85rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #f7f7f7, #e0e0e0);
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;

      &:active {
        transform: scale(0.95);
      }

      image {
        width: 90%;
        height: 90%;
        border-radius: 50%;
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;

      .hello {
        font-weight: bold;
        font-size: 40rpx;
        margin-bottom: 8rpx;
      }

      .desc {
        display: flex;
        gap: 10rpx;
        color: #aaa;
        font-size: 26rpx;

        view {
          padding: 4rpx 12rpx;
          background-color: rgba(0, 0, 0, 0.05);
          border-radius: 6rpx;
        }
      }
    }
  }
}

// 动画定义
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-50rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 6rpx 20rpx rgba(255, 71, 87, 0.4);
  }
  50% {
    box-shadow: 0 6rpx 30rpx rgba(255, 71, 87, 0.6);
  }
  100% {
    box-shadow: 0 6rpx 20rpx rgba(255, 71, 87, 0.4);
  }
}

// 响应式调整
@media (max-width: 750rpx) {
  .container {
    .health-check .desc {
      flex-direction: column;
      gap: 20rpx;
    }
  }
}
</style>
